<template>
  <transition>
    <div class="footer">
      <div class="navi-item" v-for="item of navis" :key="item.label" @click="onNavi(item.path)">
          <img :src="selectedBottomNav === item.label ? item.imgActive : item.img" class="navi-item-img">
          <div :class="selectedBottomNav === item.label ? 'navi-item-text-active' : 'navi-item-text'">
            {{item.label}}
          </div>
      </div>
    </div>
  </transition>
</template>
<script>
import {mapState} from 'vuex'
export default {
  name: 'BottomNaviBar',
  computed: {
    ...mapState(['selectedBottomNav'])
  },
  data () {
    return {
      navis: [{
        label: '首页',
        img: '',
        imgActive: '',
        path: '/'
      }, {
        label: '分类',
        img: '',
        imgActive: '',
        path: '/category'
      }, {
        label: '购物车',
        img: '',
        imgActive: '',
        path: '/cart'
      }, {
        label: '我的',
        img: '',
        imgActive: '',
        path: '/me'
      }]
    }
  },
  methods: {
    // ...mapMutations(['changeSelectedBottomNav']),
    onNavi (path) {
      // this.changeSelectedBottomNav(label)
      this.$router.push(path)
    }
  }
}
</script>
<style lang='stylus' scoped>
.v-enter, .v-leave-to
  transform: translateY(2rem)
.v-enter-active, .v-leave-active
  transition: transform .5s
.footer
  box-shadow: 0 3px 14px 2px rgba(0,0,0,.12)
  position: fixed
  z-index: 99
  left: 0rem
  right: 0rem
  bottom: 0rem
  height: 1.04rem
  background: #fff
  display: flex
  justify-content: space-around
  align-items: center
  .navi-item
    width: 1rem
    display: flex
    flex-direction: column
    align-items: center
    justify-content: center
    .navi-item-img
      width: .4rem
      height: .4rem
    .navi-item-text
      margin-top: .12rem
      font-size: .24rem
      color: #999
    .navi-item-text-active
      margin-top: .12rem
      font-size: .24rem
      color: #ff6700
</style>
